<template>
  <div class="mt-20">
    <!-- 添加按钮 -->
    <el-dropdown trigger="click" @command="handleCommand">
      <el-button class="table-header-button">
        <i class="icon-table-head icon-head-plus icon--left" v-if="type<0"></i>
        {{addWord}} <i class="el-icon-caret-bottom el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <template v-for="item in typeList" >
          <el-dropdown-item :command="item.command">{{item.label}}</el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </el-dropdown>
    <el-button class="table-header-button" icon="icon icon-request">请求评价</el-button>
    
    <!-- 添加提醒 -->
    <template v-if="type==0">
      <m-addRemind></m-addRemind>
    </template>

    <!-- 添加标签 -->
    <template v-if="type==1">
      <m-addTag></m-addTag>
    </template>

    <!-- 添加备注 -->
    <template v-if="type==2">
      <m-addRemarks></m-addRemarks>
    </template>

    <!-- 添加简历 -->
    <template v-if="type==3">
      <m-addResume></m-addResume>
    </template>  
  </div>
</template>

<script>
import {Dropdown, DropdownMenu, DropdownItem, Button} from 'element-ui'
  export default {
    components: {
      [Dropdown.name]: Dropdown,
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
      [Button.name]: Button,
      'm-addRemind': () => import('./addRemind'),
      'm-addTag': () => import('./addTag'),
      'm-addRemarks': () => import('./addRemarks'),
      'm-addResume': () => import('./addResume')
    },
    data () {
      return {
        addWord: '添加',
        type: -1,
        typeList: [
          {
            label: '添加提醒',
            command: 0,
          },
          {
            label: '添加标签',
            command: 1,
          },
          {
            label: '添加备注',
            command: 2,
          },
          {
            label: '添加简历',
            command: 3,
          },
          {
            label: '添加附件',
            command: 4,
          },
          {
            label: '加入项目',
            command: 5,
          },
          {
            label: '加入岗位',
            command: 6,
          },
        ]
      }
    },
    methods: {
      handleCommand(type) {
        this.addWord = this.typeList[type].label;
        this.type = type
      }
    }
  }
</script>

<style lang="scss">
  .ats-tool{
    .s-title{
      font-weight: bold;
      margin-bottom: 10px;
      color: #5e5e5e;
    }
  }
 
</style>
